<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Tip Messager - jQuery EasyUI Demo</title>
	<script type="text/javascript" src="../easyui-config.js"></script>
</head>
<body>
	<h2>Tip Messager</h2>
	<div style="margin:20px 0;">
		<a href="#" class="easyui-linkbutton" onclick="tip1()">Normal</a>
		<a href="#" class="easyui-linkbutton" onclick="tip2()">Error</a>
		<a href="#" class="easyui-linkbutton" onclick="tip3()">Info</a>
		<a href="#" class="easyui-linkbutton" onclick="tip4()">Question</a>
		<a href="#" class="easyui-linkbutton" onclick="tip5()">Warning</a>
	</div>
	<script>
		function tip1(){
			$.messager.tip('Here is a normal message!');
		}
		function tip2(){
			$.messager.tip({
				msg: 'Here is an error message!',
				icon: 'error'
			});
		}
		function tip3(){
			$.messager.tip({
				msg: 'Here is an info message!',
				icon: 'info'
			});
		}
		function tip4(){
			$.messager.tip({
				msg: 'Here is a question message!',
				icon: 'question'
			});
		}
		function tip5(){
			$.messager.tip({
				msg: 'Here is a warning message!',
				icon: 'warning'
			});
		}
	</script>
	
	<div>
		<div class="easyui-linkbutton" onclick="test();">test</div>
		<div class="easyui-linkbutton" onclick="confirm();">confirm</div>
		<div class="easyui-linkbutton" onclick="prompt2();">prompt2</div>
		<script>
		function test(){
			$.messager.show({
				title:'My Title',
				msg:'Message will be closed after 4 seconds.',
				showType:'show',
				style:{
					right:'',
					top:document.body.scrollTop+document.documentElement.scrollTop,
					bottom:''
				}
			});		
		}
		function confirm(){
			$.messager.confirm({
				title: 'My Title',
				msg: 'Are you confirm this?',
				fn: function(r){
					if (r){
						alert('confirmed: '+r);
					}else{
						console.log(r);
					}
				}
			});
		}
		
		function prompt2(){
			$.messager.prompt({
				title: 'Prompt',
				msg: 'Please enter your name:',
				fn: function(r){
					if (r){
						alert('Your name is:' + r);
					}
				}
			});
		}
		</script>
	</div>
	
	<div>
		<div class="easyui-linkbutton" onclick="progress();">progress</div>
		<script>
			function progress(){
				$.messager.progress({
					title:'提示',
					msg:'法外狂徒张三',
					text:'',
					interval:200
				});
				var i = 0;
				var timer = setInterval(function () {
					console.log(i++);
					if (i>100) {
					   clearInterval(timer);
					   $.messager.progress("close")
					}else{
						$.messager.progress("bar")
							.progressbar("setValue",i);
					}
				},200);
			}
		</script>
	</div>
</body>
</html>